<template>
  <div>
    <WellData :list="data1" />
    <div class="optinos">
      <el-button type="primary" @click="drawer = true"> 展开 </el-button>
      <br />
      <el-button type="danger" style="margin: 5px 0px" @click="goback()">
        返回
      </el-button>
      <br />
      <a href="#CM_WK_BASIC">
        <el-button type="info"> 顶部 </el-button>
      </a>
    </div>
    <el-drawer
      size="50%"
      title="选择对比"
      :visible.sync="drawer"
      direction="rtl"
      :before-close="handleClose"
    >
      <el-row>
        <el-col :span="12" style="border-right: 1px solid">
          <el-tree
            class="tree"
            ref="tree"
            :data="options"
            show-checkbox
            node-key="label"
            @check-change="handleGetCheckedNodes"
            style="overflow: auto; height: 400px"
          />
        </el-col>
        <el-col :span="12" style="border-right: 1px solid">
          <el-row>
            <el-table
              class="tree"
              :data="queryList"
              max-height="500px"
              style="border: 1px solid #111111"
              :cell-style="tableCellClass"
              :header-cell-style="headerCellClass"
            >
              <el-table-column label="已选中的套管">
                <el-table-column
                  prop="wellName"
                  label="井名"
                />
                <el-table-column prop="casingSize" label="尺寸"></el-table-column>
              </el-table-column>
            </el-table>
          </el-row>
          <el-row style="margin: 10px 5%; text-align: right">
            <el-button type="primary" @click="compare">对比分析</el-button>
          </el-row>
        </el-col>
      </el-row>
    </el-drawer>
  </div>
</template>

<script>
import WellData from './comprehensiveDataSheet/index'
import { Drawer, Backtop } from 'element-ui'
import {
  getWellDetailCompare,
  getCompareData,
  getCompareTree,
  getWellCasingSize,
  getCompareTreeToCasingSize,
  getGeneralDataReport,
} from '../../../api/module/dataquery.js'

export default {
  components: {
    elDrawer: Drawer,
    WellData,
    elBacktop: Backtop,
  },
  data() {
    return {
      loading: false,
      drawer: false,
      options: [],
      form: {},
      pager: {},
      wellName: '',
      tableCellClass: {
        'border-bottom': '1px solid #111111',
        'border-right': '1px solid #111111',
      },
      headerCellClass: {
        'border-bottom': '1px solid #111111',
        'border-right': '1px solid #111111',
      },
      data1: [{},{},{},{},{}],
      queryList: []
    }
  },
  created() {
    this.form = this.$route.params.filterForm
    this.pager = this.$route.params.pager
    this.wellName = this.$route.params.id
    this.handleGetWellCasingSize()
    this.getTree()
  },
  methods: {
    handleGetWellCasingSize() {
      getWellCasingSize({ wellName: this.wellName })
        .then((res) => {
          this.dealQueryList(this.wellName, res.data.data)
        })
        .catch((err) => {
          console.log(err)
          this.loading = false
        })
    },
    dealQueryList(wellName, list) {
      let queryList = []
      list.forEach((l) => {
        queryList.push({
          wellName: this.wellName,
          casingSize: l,
        })
      })
      this.handleGetGeneralDataReport(queryList)
    },
    handleGetGeneralDataReport(queryList) {
      this.drawer = false
      this.loading = true
      getGeneralDataReport(queryList)
        .then((res) => {
          this.data1 = res.data.data
          while (5 - this.data1.length > 0) {
            this.data1.push({})
          }
          this.loading = false
        })
        .catch((err) => {
          this.$message.error('查询失败，请返回重新查询！')
          this.loading = false
        })
    },
    getTree() {
      getCompareTreeToCasingSize()
        .then((res) => {
          this.options = res.data.data
        })
        .catch((err) => {
          this.$message.error('未查询到套管树状数据')
        })
    },
    handleGetCheckedNodes() {
      let checkedNodes = this.$refs.tree.getCheckedNodes(false, true)
      this.queryList = this.dealCompareQueryList(checkedNodes)
    },
    dealCompareQueryList(list){
      let temp = '', queryList = []
      for (let i = 0; i < list.length; i++) {
        const e1 = list[i]
        if (e1.children.length === 0) {
          const e2 = list[i - 1]
          if (e2.children.length > 0) {
            temp = e2.label
          }
          queryList.push({
            wellName: temp,
            casingSize: e1.label,
          })
        }
      }
      return queryList
    },
    compare() {
      if (this.queryList.length > 5) {
        this.$message.warning('最多选中 5 个套管尺寸，请检查！')
      } else {
        this.handleGetGeneralDataReport(this.queryList)
      }
    },
    handleClose(done) {
      done()
    },
    goback() {
      this.$router.push({
        name: 'wellQuery',
        params: { filterForm: this.form, pager: this.pager },
      })
    },
  },
}
</script>

<style scoped>
.optinos {
  position: fixed;
  bottom: 10%;
  right: 0px;
}
.tree {
  margin: auto 5%;
  width: 90%;
}
</style>
